<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<html>
<HEAD>
<base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>

<!--引入jquery -->
<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                $.ajax({
                    url:"send/array/one.html",    //请求目标资源的地址
                    type:"post",              //请求方式
                    data:{
                        array:[3,5,6]          //要发送的请求参数
                    },
                    dataType:"text",          //服务器返回的数据解析的类型
                    success:function (response) { //服务器端成功处理请求后调用的回调函数
                        alert(response)
                    },

                    error:function (response) { //服务器端失败处理请求后调用的回调函数
                        alert(response)
                    }

                })

            })


            $("#btn2").click(function () {
                $.ajax({
                    url:"send/array/two.html",    //请求目标资源的地址
                    type:"post",              //请求方式
                    data:{
                        "array[0]":7,          //要发送的请求参数
                        "array[1]":33,
                        "array[2]":45
                    },
                    dataType:"text",          //服务器返回的数据解析的类型
                    success:function (response) { //服务器端成功处理请求后调用的回调函数
                        alert(response)
                    },

                    error:function (response) { //服务器端失败处理请求后调用的回调函数
                        alert(response)
                    }

                })

            })

            $("#btn3").click(function () {

                //准备好要发送到服务器端的数组
                var array=[56,22,78];
                console.log(array.length);


                //将json数组转换为json字符串
                var requestBody=JSON.stringify(array);
                //"['56','22','78']"
                console.log(requestBody.length);


                $.ajax({
                    url:"send/array/three.html",    //请求目标资源的地址
                    type:"post",              //请求方式
                    data:requestBody,         //请求体
                    contentType:"application/json;charset=UTF-8",//请求体的内容类型
                    dataType:"text",          //服务器返回的数据解析的类型
                    success:function (response) { //服务器端成功处理请求后调用的回调函数
                        alert(response)
                    },

                    error:function (response) { //服务器端失败处理请求后调用的回调函数
                        alert(response)
                    }

                })

            })

            $("#btn4").click(function () {
                //准备好要发送的数据
                var student={
                    stuId:5,
                    stuName:"tom",
                    address:{
                        province:"福建省",
                        city:"厦门市",
                        street:"湖里区"
                    },
                    subjectList:[ //List是数组,数组里面又是个对象
                        {
                            subjectName:"javase",
                            subjectScore:100
                        },
                        {
                            subjectName:"语文",
                            subjectScore:120
                        }
                    ],
                    map:{
                        "k1":"v1",
                        "k2":"v2"
                    }
                }

                //将json数组转换为json字符串
                var requestBody=JSON.stringify(student)

                $.ajax({
                    url:"send/comose/object.html",    //请求目标资源的地址
                    type:"post",              //请求方式
                    data:requestBody,         //请求体
                    contentType:"application/json;charset=UTF-8",//请求体的内容类型
                    dataType:"text",          //服务器返回的数据解析的类型
                    success:function (response) { //服务器端成功处理请求后调用的回调函数
                        alert(response)
                    },

                    error:function (response) { //服务器端失败处理请求后调用的回调函数
                        alert(response)
                    }

                })

            })

            $("#btn5").click(function () {
                //准备好要发送的数据
                var student={
                    stuId:5,
                    stuName:"tom",
                    address:{
                        province:"福建省",
                        city:"厦门市",
                        street:"湖里区"
                    },
                    subjectList:[ //List是数组,数组里面又是个对象
                        {
                            subjectName:"javase",
                            subjectScore:100
                        },
                        {
                            subjectName:"语文",
                            subjectScore:120
                        }
                    ],
                    map:{
                        "k1":"v1",
                        "k2":"v2"
                    }
                }

                //将json数组转换为json字符串
                var requestBody=JSON.stringify(student)

                $.ajax({
                    url:"send/comose/object/two.json",    //请求目标资源的地址
                    type:"post",              //请求方式
                    data:requestBody,         //请求体
                    contentType:"application/json;charset=UTF-8",//请求体的内容类型
                    dataType:"json",          //服务器返回的数据解析的类型
                    success:function (response) { //服务器端成功处理请求后调用的回调函数
                        console.log(response)
                    },

                    error:function (response) { //服务器端失败处理请求后调用的回调函数
                        console.log(response)
                    }

                })

            })
            $("#btn6").click(function () {
                /*alert("dddjjsjj")*/
                //使用layer弹窗效果
                layer.msg("ddddjjjj")
            })



        })


    </script>


</HEAD>
<body>



<h2>Hello World!</h2>
    <a href="test/ssm.html">测试整合环境</a>
    <br/>
    <button id="btn1" >Send数组[5,8,12]  第一种方案</button>
    <br/>
    <br/>
    <button id="btn2" >Send数组[7,33,45]  第二种方案</button>
    <br/>
<br/>
    <button id="btn3" >Send数组[56,22,78]  第三种方案</button>

<br/>
<br/>
<button id="btn4" >Send Compose Object</button>

<br/>
<br/>
<button id="btn5" >Send Compose Object结果集封装</button>

<!--使用layer组件 -->
<button id="btn6" >点我弹窗</button>

</body>
</html>
